<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据可视化</title>
    <link rel="SHORTCUT ICON" href="../static/img/icon.png">
    <link rel="stylesheet" type="text/css" href="../static/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/dataAdmin.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/main_dataAnalysis.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/dataAnalysis.css"/>
    <script type="text/javascript" src="../static/js/jquery.js"></script>

    <style>
        body {
            background: #F6F8FA;
        }


        .nav {
            background-color: #a5aca4;
            height: 80px;
            width: 1330px;
            margin-left: 7px;
            margin-right: 7px;

        }

        .content {
            width: 1330px;
            background-color: #fff;
            margin-top: 7px;
            height: 400px;
            margin-left: 7px;
        }

        .rotation-chart {
            width: 1330px;
            background-color: #fff;
            margin-top: 8px;
            height: 30px;
            margin-left: 7px;
        }

        .footer {
            width: 1330px;
            background-color: #312c2c;
            margin-top: 5px;
            height: 80px;
            margin-left: 7px;
            margin-bottom: 5px;
        }

        .logo {
            width: 250px;
            height: 80px;
            background-color: #aee6a6;
            margin-left: 10px;
        }

        .logo img {
            width: 250px;
            height: 80px;
        }

    </style>
</head>
<body>
<div class="container" id="container" style="">
    <!--nav-->
    <div class="nav">
        <div class="logo">
            <img src="../static/img/logo.jpg">
        </div>
    </div>
    <nav>
        <!--导航条-->
        <ul class="nav-main">
            <li><a href="">首页</a></li>
            <li id="li-1">在线数据分析<span></span></li>
            <li id="li-2">数据社区<span></span></li>
            <li id="li-3">数据可视化<span></span></li>
            <li><a href="/analysis_case/">案例展示</a></li>
            <li><a href="/contact/">联系我们</a></li>
            <li><a href="/help/">帮助中心</a></li>
        </ul>
        <!--隐藏盒子-->
        <div id="box-1" class="hidden-box hidden-loc-index">
            <ul>
                <li><a href="/analysis/">数据分析</a></li>
            </ul>
        </div>
        <div id="box-2" class="hidden-box hidden-loc-us">
            <ul>
                <li><a href="/codeopen/">代码开源</a></li>
                <li><a href="/datanews/">数据分析资讯</a></li>
            </ul>
        </div>
        <div id="box-3" class="hidden-box hidden-loc-info">
            <ul>
                <li><a href="/visualization/bar/">数据可视化</a></li>
            </ul>
        </div>
    </nav>
    <div class="menu" id="menu">
        <div class="wrap">
            <div class="header_menu">Python数据可视化</div>
            <div class="nav1">
                <ul>
                    <li class="list">
                        <h2><i></i>直角坐标系图表</h2>
                        <div class="hide">
                            <a href="bar_chart.html"><h5>柱状图</h5></a>
                            <a href="#"><h5>箱型图</h5></a>
                            <a href="#"><h5>K线图</h5></a>
                            <a href="#"><h5>面积图</h5></a>
                            <a href="#"><h5>散点图</h5></a>
                            <a href="#"><h5>面积图</h5></a>
                            <a href="#"><h5>折线图</h5></a>
                        </div>
                    </li>
                    <li class="list">
                        <h2><i></i>基本图表</h2>
                        <div class="hide">
                            <a href="#"><h5>漏斗图</h5></a>
                            <a href="#"><h5>关系图</h5></a>
                            <a href="#"><h5>饼图</h5></a>
                            <a href="#"><h5>雷达图</h5></a>
                            <a href="#"><h5>词云图</h5></a>
                            <a href="#"><h5>日历图</h5></a>
                        </div>
                    </li>

                    <li class="list">
                        <h2><i></i>3D图表</h2>
                        <div class="hide">
                            <a href="#"><h5>3D柱状图</h5></a>
                            <a href="#"><h5>3D折线图</h5></a>
                            <a href="#"><h5>3D散点图</h5></a>
                        </div>
                    </li>
                    <li class="list">
                        <h2><i></i>树形图表</h2>
                        <div class="hide">
                            <a href="#"><h5>树图</h5></a>
                            <a href="#"><h5>矩形树图</h5></a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="content1" id="content1">
        内容在这里
    </div>

    <div class="footer" id="footer">
        版权 © dry
    </div>

</div>
<script>
    (function () {
        var oList = document.querySelectorAll('.list h2'),
            oHide = document.querySelectorAll('.hide'),
            oIcon = document.querySelectorAll('.list i'),
            lastIndex = 0;
        for (var i = 0; i < oList.length; i++) {
            oList[i].index = i;//自定义属性
            oList[i].isClick = false;
            oList[i].initHeight = oHide[i].clientHeight;
            oHide[i].style.height = '0';
            oList[i].onclick = function () {
                if (this.isClick) {
                    oHide[this.index].style.height = '0';
                    oIcon[this.index].className = '';
                    oList[this.index].className = '';
                    oList[this.index].isClick = false;
                } else {
                    oHide[lastIndex].style.height = '0';
                    oIcon[lastIndex].className = '';
                    oList[lastIndex].className = '';
                    oHide[this.index].style.height = '220px';
                    oIcon[this.index].className = 'on';
                    oList[this.index].className = 'on';
                    oList[lastIndex].isClick = false;
                    oList[this.index].isClick = true;
                    lastIndex = this.index;
                }
            }
        }
    })();
</script>
<script src="../static/js/index.js"></script>
</body>
</html>